<template>
  <div class="w-1/5 pl-2 border-l ml-2 h-full relative">
    <div class="h-24 border border-primary rounded p-2 bg-secondary">
      <MedicineInfo class="!h-12" :value="{ mc: currentRow.ypmc || '请选择药品', gg: currentRow.gg, cj: currentRow.cj }" />
      <div class="flex justify-between">
        <div>{{ currentRow.ph }}</div>
        <div>
          <span>
            应扫<span class="text-red-500">{{ currentRow.shouldScanCodeNum || 0 }}</span>
          </span>
          <span>
            已扫<span class="text-red-500">{{ currentRow.kcTraceCodeRecordList?.length || 0 }}</span>
          </span>
          <span>
            还剩<span class="text-red-500">{{ lastCode || 0 }} </span>未扫
          </span>
        </div>
      </div>
    </div>
    <div class="mt-4">
      <a-textarea
        class="w-full border rounded p-2 bg-thin"
        :rows="4"
        :disabled="lastCode === 0 || !currentRow.ypmc || scDisabled"
        placeholder="请扫码"
        @keydown.enter="onInputEnter"
      />
    </div>
    <div class="mt-4">
      <BaseTable :data-source="currentRow.kcTraceCodeRecordList" max-fill :columns="scColumns" :scroll="{ x: 500 }">
        <template #bodyCell="{ column, index, text, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button type="text" danger size="small" :disabled="scDisabled" @click="onDelSc(record)">删除</a-button>
          </template>
          <template v-else>
            {{ text || '-' }}
          </template>
        </template>
      </BaseTable>
    </div>
    <div class="absolute w-full left-2 bottom-2">
      <a-divider class="mb-2" />
      <div class="flex text-lg font-bold justify-between px-4">
        <div>
          <span class="pr-1">本次扫描</span><span class="text-red-500">{{ resData.sumNum || 0 }}</span>
        </div>
        <div>
          <span class="pr-1">有效码</span> <span class="text-red-500">{{ resData.effectiveTcCodeList?.length || 0 }}</span>
        </div>
        <div>
          <span class="pr-1">重复码</span><span class="text-red-500">{{ resData.repeatTcCodeList?.length || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { debounce } from 'lodash-es'
import systemLoading from '@/utils/loading'

const scColumns = [
  { title: '序号', dataIndex: 'xh', width: 60 },
  { title: '盒码', dataIndex: 'tcCode', width: 160, ellipsis: true },
  { title: '包码', dataIndex: 'tcMidCode', width: 100, ellipsis: true },
  { title: '箱码', dataIndex: 'tcBigCode', width: 100, ellipsis: true },
  { title: '操作', dataIndex: 'action', fixed: 'right' }
]
const emit = defineEmits(['success'])

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => ({})
  },
  scDisabled: {
    type: Boolean,
    default: false
  }
})
const lastCode = computed(() => {
  return props.currentRow.shouldScanCodeNum - props.currentRow.kcTraceCodeRecordList?.length
})
const onInputEnter = debounce(async (e) => {
  systemLoading(true)
  saveCode(e)
}, 500)
const resData = ref({})
const saveCode = async (e) => {
  const codeList = e.target.value.split('\n').filter((item) => !!item)
  if (lastCode.value === 0) {
    return message.error('已扫完')
  }
  if (!codeList.length) return message.error('请扫码')
  const params = codeList.map((item) => {
    return {
      tcCode: item,
      ph: props.currentRow.ph,
      ypbh: props.currentRow.ypbh,
      jhdh: props.currentRow.lsh
    }
  })

  const { msg, code, data } = await post('/drugStorage/traceCode/doSaveKcSupplyTraceCodeRecordBatch', params)
  e.target.value = ''
  systemLoading(false)

  if (code !== 0) return message.error(msg)
  message.success('扫码成功')
  emit('success')
  resData.value = data
}
const onDelSc = async (row) => {
  const { msg, code } = await post('/drugStorage/traceCode/doDelSupplyKcTraceCodeRecord', { id: row.id })
  if (code !== 0) return message.error(msg)
  message.success('删除成功')
  emit('success')
}
</script>
<style lang="less" scoped></style>
